<template lang="pug">
div
    CheckboxGroup(v-model="social")
        template(v-for="item,index in data")
            Checkbox(:label="item.id")
                img(:src="'/public/img/' + item.imgName" style="float:left;margin:10px;width:275px;height:150px")
                p(style="text-align:center;") {{item.text}}
            template(v-if="(index + 1) % 3 == 0")
                div(style="clear:both")
    br
    Button(type="primary" style="margin-left:10px" @click="handleDelete()") 删除
    Button(type="primary" style="margin-left:10px" @click="handleAdd()") 添加
    br
    br
    Form
        FormItem(label="文字描述")
            Input(v-model="text" placeholder="请输入文字描述" style="width:300px")
        FormItem(label="链接地址")
            Input(v-model="link" placeholder="请输入链接地址" style="width:300px")
        FormItem(label="图片")
            Upload(action="/api/imgUpload" :on-success="handleSuccess" :show-upload-list="false" :format="['jpg','jpeg','png']")
                template(v-if="img != ''")
                    img(type="ghost"  :src="'/public/img/' + img" style="width:100px;height:100px;")
                template(v-else)
                    Button(type="ghost" icon="ios-cloud-upload-outline") Upload Image
</template>
<script>
export default {
    data() {
        return {
            data: [],
            social: [],
            img: "",
            text: "",
            link: ""
        };
    },
    methods: {
        async handleDelete() {
            if (this.social.length == 0) return;
            this.$Modal.confirm({
                title: "确认删除",
                content: "<p>确认删除吗？</p>",
                onOk: async () => {
                    for (var i = 0; i < this.social.length; i++) {
                        await this.axios.delete(
                            "/api/cooperativePartner/" + this.social[i]
                        );
                    }
                    var res = (await this.axios.get("/api/cooperativePartner"))
                        .data.message.data;
                    this.data = res;
                    this.$Message.info("Clicked ok");
                },
                onCancel: () => {
                    this.$Message.info("Clicked cancel");
                }
            });
        },
        async handleAdd() {
            var res = (await this.axios.post("/api/cooperativePartner", {
                data: { img: this.img, text: this.text, link: this.link }
            })).data;
            if (res.status) {
                this.$Message.success("Success!");
                var id = res.message.insert_id;
                var imgName = this.img;
                this.data.push({ id: id, imgName: imgName, text: this.text });
            } else {
                this.$Message.error("Fail!");
            }
        },
        handleSuccess(res) {
            this.img = res.message.data.filename;
        }
    },
    async mounted() {
        var res = (await this.axios.get("/api/cooperativePartner")).data.message
            .data;
        this.data = res;
    }
};
</script>